<template>
  <n-button quaternary @click="changeTheme" title="主题">
    <n-icon size="20" :depth="1">
      <moon-icon v-if="designStore.darkTheme" />
      <sunny-icon v-else />
    </n-icon>
  </n-button>
</template>

<script setup lang="ts">
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { setHtmlTheme } from '@/utils/utils'
import { icon } from '@/plugins/icons'

const { MoonIcon, SunnyIcon } = icon.ionicons5
const designStore = useDesignStore()

const changeTheme = () => {
  designStore.changeTheme()
  setHtmlTheme()
}
</script>

<style lang="scss" scoped></style>
